<!--
 * @Date: 2023-03-01 10:56:23
 * @LastEditors: mengqingchen mengqc1995@163.com
 * @LastEditTime: 2023-03-07 15:58:25
 * @FilePath: \sososn-web-new\src\components\contactDialog.vue
-->
<template>
  <el-dialog
    v-model="dialogVisible"
    class="contactDialog"
    :show-close="false"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <template #header>
      <div class="my-header items-center justify-center">
        <span class="title-text">{{ title }}</span>
        <img :src="$getAssetsImages('close1.png')" class="right-icon" @click="handleClose" />
      </div>
    </template>
    <div class="form-box">
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        class="ruleForm-demo"
        label-suffix=":"
        label-width="auto"
      >
        <el-form-item label="公司名称" prop="enterpriseName">
          <el-input
            v-model="ruleForm.enterpriseName"
            maxlength="30"
            placeholder="请输入您公司名称"
          />
        </el-form-item>
        <el-form-item label="联系人" prop="contactUserName">
          <el-input
            v-model="ruleForm.contactUserName"
            maxlength="10"
            placeholder="请输入您的姓名"
          />
        </el-form-item>
        <el-form-item label="联系方式" prop="contactWay">
          <el-input v-model="ruleForm.contactWay" placeholder="请输入您的联系方式" maxlength="11" />
        </el-form-item>
      </el-form>

      <div class="items-center">
        <el-button class="item-box mr-10" type="primary" @click="submitForm">提交申请</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
// import { selectDistrictList, addClue } from '@/api/modules/mall'

// import { MessageReset } from '@/utils/resetMessage'
defineProps({
  title: {
    type: String,
    default: '方案咨询'
  }
})

const state = reactive({
  dialogVisible: false,
  ruleForm: {
    enterpriseName: '',
    contactUserName: '',
    contactWay: ''
  },
  rules: {
    enterpriseName: {
      required: true,
      message: '请输入公司名称'
    },
    contactUserName: {
      required: true,
      message: '请输入联系人名称'
    },
    contactWay: [
      {
        required: true,
        message: '请输入手机号'
      },
      {
        pattern: /^[1][3-9][0-9]{9}$/,
        trigger: ['blur', 'change'],
        message: '请验证手机号正确性'
      }
    ]
  },
  ruleFormRef: null
})

const emit = defineEmits(['update:modelValue'])

function handleClose() {
  emit('update:modelValue', false)
}

function submitForm() {
  state.ruleFormRef.validate(valid => {
    if (valid) {
      console.log('进入')
      // const data = {
      //   ...state.ruleForm,
      //   clueType: 2,
      //   districtCode: state.ruleForm.district.districtCode,
      //   districtName: state.ruleForm.district.districtName
      // }
      // addClue(data).then(res => {
      //   if (res.code === 200) {
      //     MessageReset.success('提交申请成功！')
      //     state.dialogVisible = false
      //     emit('update:modelValue', false)
      //   }
      // })
    } else {
      console.log('error submit!!')
      return false
    }
  })
}
const { dialogVisible, ruleForm, rules, ruleFormRef } = toRefs(state)
</script>
<style lang="scss">
@use './scss/contactDialog.scss';
</style>
